<!DOCTYPE html>
<html>

<head>
    
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">

<meta name="description" content="A new Hugo site.">
<title>
    Laravel Vue 开发小记 (二) - dashjay
</title>



<link rel="shortcut icon" href="/sam.ico">








<link rel="stylesheet" href="/css/main.min.4321edce0de245f4b1d32680d89ac669940fe5dec17e1791c721d9a0954987b4.css" integrity="sha256-QyHtzg3iRfSx0yaA2JrGaZQP5d7BfheRxyHZoJVJh7Q=" crossorigin="anonymous" media="screen">





<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Didact+Gothic">

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="http://dashjay.gitee.io/tn.png"/>

<meta name="twitter:title" content="Laravel Vue 开发小记 (二)"/>
<meta name="twitter:description" content="使用 &lt;components :is=...&gt;的方式实现多模块 有个需求就是点击注册和登录弹出不同的Modal，之前实现的方法是两个都写好，使用v-if来操控显示，比较蠢。 ![](/post/2019-09-03-laravel-vue.zh.2_files/屏幕快照 2019-09-03 下午10.49.18.jpg)
以上是两个写好的模块，是两个Modal和自己的逻辑在NavBar模块当中有两个按钮控制
&lt;div class=&#34;btn-menu&#34;&gt; &lt;Button ref=&#34;loginBtn&#34; shape=&#34;circle&#34; @click=&#34;handleBtnClick(&#39;login&#39;)&#34;&gt;{{$t(&#39;m.Login&#39;)}} &lt;/Button&gt; &lt;Button shape=&#34;circle&#34; @click=&#34;handleBtnClick(&#39;register&#39;)&#34; style=&#34;margin-left: 5px;&#34;&gt;{{$t(&#39;m.Register&#39;)}} &lt;/Button&gt; &lt;/div&gt; &lt;script&gt; export default{ ... methods:{ ...mapActions([&#39;getProfile&#39;, &#39;changeModalStatus&#39;, &#39;clearProfile&#39;]), handleBtnClick(mode) { this.changeModalStatus({ visible: true, mode: mode }) }, } } &lt;/script&gt; 当按下按钮的时候就会把这个{visible: true,mode: mode}对象传入vuex中
const rootMutations = { //更新一个模块的状态  updateModalStatus(state, payload) { state.modalStatus = payload; } }; const rootActions = { changeModalStatus({commit}, payload) { commit(&#39;updateModalStatus&#39;, payload); }, }; 这样前端就能根据state的内容显示对应的模块了，前端要这么写"/>

<meta property="og:title" content="Laravel Vue 开发小记 (二)" />
<meta property="og:description" content="使用 &lt;components :is=...&gt;的方式实现多模块 有个需求就是点击注册和登录弹出不同的Modal，之前实现的方法是两个都写好，使用v-if来操控显示，比较蠢。 ![](/post/2019-09-03-laravel-vue.zh.2_files/屏幕快照 2019-09-03 下午10.49.18.jpg)
以上是两个写好的模块，是两个Modal和自己的逻辑在NavBar模块当中有两个按钮控制
&lt;div class=&#34;btn-menu&#34;&gt; &lt;Button ref=&#34;loginBtn&#34; shape=&#34;circle&#34; @click=&#34;handleBtnClick(&#39;login&#39;)&#34;&gt;{{$t(&#39;m.Login&#39;)}} &lt;/Button&gt; &lt;Button shape=&#34;circle&#34; @click=&#34;handleBtnClick(&#39;register&#39;)&#34; style=&#34;margin-left: 5px;&#34;&gt;{{$t(&#39;m.Register&#39;)}} &lt;/Button&gt; &lt;/div&gt; &lt;script&gt; export default{ ... methods:{ ...mapActions([&#39;getProfile&#39;, &#39;changeModalStatus&#39;, &#39;clearProfile&#39;]), handleBtnClick(mode) { this.changeModalStatus({ visible: true, mode: mode }) }, } } &lt;/script&gt; 当按下按钮的时候就会把这个{visible: true,mode: mode}对象传入vuex中
const rootMutations = { //更新一个模块的状态  updateModalStatus(state, payload) { state.modalStatus = payload; } }; const rootActions = { changeModalStatus({commit}, payload) { commit(&#39;updateModalStatus&#39;, payload); }, }; 这样前端就能根据state的内容显示对应的模块了，前端要这么写" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://dashjay.gitee.io/posts/laravel-vue.zh/" />
<meta property="og:image" content="http://dashjay.gitee.io/tn.png"/>
<meta property="article:published_time" content="2019-09-03T00:00:00+00:00" />
<meta property="article:modified_time" content="2019-09-03T00:00:00+00:00" /><meta property="og:site_name" content="Call me Sam" />


    

    
    
    
    <title>
        
        Laravel Vue 开发小记 (二)
        
    </title>
</head>

<body>
    
    
    <header class="wrap flex-container">
        <h1>Laravel Vue 开发小记 (二)</h1>
    </header>
    
    <main class="wrap">
        
<div class="flex-container">
    <aside role="complementary">
        Tue Sep 03, 2019 &#183; 98 words
        <div class="tag-container">
            
            
            <span class="tag">
                <a href="/tags/laravel/">
                    laravel
                </a>
            </span>
            
            
            
            <span class="tag">
                <a href="/tags/vue/">
                    vue
                </a>
            </span>
            
            
        </div>
    </aside>
    <hr />
    <article role="article">
        <h1 id="使用-components-is的方式实现多模块">使用 <code>&lt;components :is=...&gt;</code>的方式实现多模块</h1>
<p>有个需求就是点击注册和登录弹出不同的Modal，之前实现的方法是两个都写好，使用v-if来操控显示，比较蠢。 ![](/post/2019-09-03-laravel-vue.zh.2_files/屏幕快照 2019-09-03 下午10.49.18.jpg)</p>
<p>以上是两个写好的模块，是两个Modal和自己的逻辑在NavBar模块当中有两个按钮控制</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;btn-menu&#34;</span>&gt;
                    &lt;<span style="color:#f92672">Button</span>
                            <span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;loginBtn&#34;</span>
                            <span style="color:#a6e22e">shape</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;circle&#34;</span>
                            <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;handleBtnClick(&#39;login&#39;)&#34;</span>&gt;{{$t(&#39;m.Login&#39;)}}
                    &lt;/<span style="color:#f92672">Button</span>&gt;
                    &lt;<span style="color:#f92672">Button</span>

                            <span style="color:#a6e22e">shape</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;circle&#34;</span>
                            <span style="color:#960050;background-color:#1e0010">@</span><span style="color:#a6e22e">click</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;handleBtnClick(&#39;register&#39;)&#34;</span>
                            <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;margin-left: 5px;&#34;</span>&gt;{{$t(&#39;m.Register&#39;)}}
                    &lt;/<span style="color:#f92672">Button</span>&gt;
                &lt;/<span style="color:#f92672">div</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;
 <span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span>{
 ...
 <span style="color:#a6e22e">methods</span><span style="color:#f92672">:</span>{
  ...<span style="color:#a6e22e">mapActions</span>([<span style="color:#e6db74">&#39;getProfile&#39;</span>, <span style="color:#e6db74">&#39;changeModalStatus&#39;</span>, <span style="color:#e6db74">&#39;clearProfile&#39;</span>]),
  <span style="color:#a6e22e">handleBtnClick</span>(<span style="color:#a6e22e">mode</span>) {
                <span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">changeModalStatus</span>({
                    <span style="color:#a6e22e">visible</span><span style="color:#f92672">:</span> <span style="color:#66d9ef">true</span>,
                    <span style="color:#a6e22e">mode</span><span style="color:#f92672">:</span> <span style="color:#a6e22e">mode</span>
                })
            },
 }
 }
&lt;/<span style="color:#f92672">script</span>&gt;
</code></pre></div><p>当按下按钮的时候就会把这个<code>{visible: true,mode: mode}</code>对象传入vuex中</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rootMutations</span> <span style="color:#f92672">=</span> {
    <span style="color:#75715e">//更新一个模块的状态
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">updateModalStatus</span>(<span style="color:#a6e22e">state</span>, <span style="color:#a6e22e">payload</span>) {
        <span style="color:#a6e22e">state</span>.<span style="color:#a6e22e">modalStatus</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">payload</span>;
    }
};

<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">rootActions</span> <span style="color:#f92672">=</span> {

    <span style="color:#a6e22e">changeModalStatus</span>({<span style="color:#a6e22e">commit</span>}, <span style="color:#a6e22e">payload</span>) {
        <span style="color:#a6e22e">commit</span>(<span style="color:#e6db74">&#39;updateModalStatus&#39;</span>, <span style="color:#a6e22e">payload</span>);
    },
};
</code></pre></div><p>这样前端就能根据state的内容显示对应的模块了，前端要这么写</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">Modal</span> <span style="color:#a6e22e">v-model</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;modalVisible&#34;</span> <span style="color:#a6e22e">:width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;400&#34;</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">slot</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;header&#34;</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;modal-title&#34;</span>&gt;Welcome to USTB OJ&lt;/<span style="color:#f92672">div</span>&gt;
            &lt;<span style="color:#f92672">component</span> <span style="color:#a6e22e">:is</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;modalStatus.mode&#34;</span> <span style="color:#a6e22e">v-if</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;modalVisible&#34;</span>&gt;&lt;/<span style="color:#f92672">component</span>&gt;
            &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">slot</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;footer&#34;</span> <span style="color:#a6e22e">style</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;display: none&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
        &lt;/<span style="color:#f92672">Modal</span>&gt;
</code></pre></div><p>这样来看就可以切换模块啦</p>
<h1 id="有一篇更简单的文章">有一篇更简单的文章</h1>
<p><a href="https://blog.csdn.net/qq_30758077/article/details/83069715">vue component :is实现多个组件之间的切换 from CSDN</a></p>
<h2 id="其他问题出现promise-uncaught的情况">其他问题，出现Promise Uncaught的情况</h2>
<p>在（一）中的<code>new Promise</code>函数能解决</p>

    </article>
</div>


        
<nav role="navigation" class="flex-container bottom-menu">
    
<hr />
<p>


    
        <a href="/posts">back</a>
        
            &#183;
        
    

    
        
            <a href="/posts">我的文章</a>
        
    
    
        
            &#183; 
            <a href="/gallery">画册</a>
        
            &#183; 
            <a href="/portfolio">珍贵时光</a>
        
            &#183; 
            <a href="/about">关于我</a>
        
    
    &#183; 
    <a href="/">
        main
    </a>

</p>
</nav>

    </main>
    
    <footer class="flex-container footer">I will code for a long time. Would you?</footer>
    
    
</body>

</html>